/**
 * aqiData，存储用户输入的空气指数数据
 * 示例格式：
 * aqiData = {
 *    "北京": 90,
 *    "上海": 40
 * };
 */
var aqiData = {

};

/**
 * 从用户输入中获取数据，向aqiData中增加一条数据
 * 然后渲染aqi-list列表，增加新增的数据
 * 
 * 
 用户输入的城市名必须为中英文字符，空气质量指数必须为整数
用户输入的城市名字和空气质量指数需要进行前后去空格及空字符处理（trim）
用户输入不合规格时，需要给出提示（允许用alert，也可以自行定义提示方式）
用户可以点击表格列中的“删除”按钮，删掉那一行的数据
 */

function addAqiData() {
	var a = document.getElementById("aqi-city-input").value;
	var b = document.getElementById("aqi-value-input").value;
	var re1=/(^\s+)|(\s$$)/g; //去除开头结尾的空字符
	var a=a.replace(re1,"");
	var b=b.replace(re1,"");
	//var re2=/[\s]/g//可以加入一条对输入内容中(中间的不是首尾)是否有空格进行匹配
	var rex=/^[\u4e00-\u9fa5 a-z A-Z \S]+$/g;//限定中英文范围
	var rex2=/^[1-9]\d*$/  //限定数字
	var arex=rex.test(a);
	var brex=rex2.test(b);
	//alert(brex);
	if (arex&&brex) { //判断空
		//alert("kong")
		var rex3=/^.{1,10}$/    //限制输入的字符1-10个
		if(rex3.test(a)){
			aqiData[a] = b; //增加json值对
		}else{
			alert("输入太长")
		}
		
	}else{
		if(arex){
			alert("请输入正确空气质量")
		}else{
			alert("请输入正确城市名")
		}
	}
	
	//aqiData.a=b;
	//var bb="aaa";
}

/**
 * 渲染aqi-table表格
 */

function TR() {
	return document.createElement("tr");
}

function TD(sss) {
	var td = document.createElement("td");
	td.innerHTML = sss;
	return td;
}

function clear() {
	var table = document.getElementById("aqi-table");
	var delList = table.children;
	//alert(delList.length)
	var delLength = delList.length //(现有的子的个数,需要删这么多次)
	for (var k = 0; k < delLength; k++) { //delList.length不可直接作为k的条件,因为此时在做删除,会影响length
		table.removeChild(delList[0]);
		//alert("888888")
	}
}

function renderAqiList() {
	clear(); //需要先清除旧的
	//alert("22222222")
	var table = document.getElementById("aqi-table");
	var list = ["城市", "空气质量", "操作"];
	var tr = new TR();
	//var td=new TD();
	for (var i = 0; i < list.length; i++) {
		//var s=new TD(list[i])
		tr.appendChild(new TD(list[i]));
	}
	table.appendChild(tr);

	for (var api in aqiData) {
		var tr = new TR();

		tr.appendChild(new TD(api));
		tr.appendChild(new TD(aqiData[api]));
		table.appendChild(tr);
		var btn = document.createElement("button"); ////????
		btn.innerHTML = "删除";
		btn.onclick = delBtnHandle;
		tr.appendChild(btn);

		//alert(api);
		//alert(aqiData[api]);
	}
}

/**
 * 点击add-btn时的处理逻辑
 * 获取用户输入，更新数据，并进行页面呈现的更新
 */
function addBtnHandle() {
	addAqiData();
	renderAqiList();
}

/**
 * 点击各个删除按钮的时候的处理逻辑
 * 获取哪个城市数据被删，删除数据，更新表格显示
 */
function delBtnHandle() {
	// do sth.
	var del1 = this.parentElement.firstChild;//得到当前按钮的父层A
	var delText = del1.textContent;  //父层A下的第一个是城市名,得到他的文本值
	delete aqiData[delText]; //删除数据中对应的城市和值
	//alert(del1.textContent);
	renderAqiList();//重新渲染
}

function init() {

	// 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数

	// 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数

}

//init();//在html的脚本处理了